<template>
<div>
  <div >
    <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="back()"
    />
  </div>
  <div>
  <div >
    <div class="cls01">
      <van-tag round type="danger">热销榜NO.1</van-tag>
    </div>
    <div >
      <p class="p1">{{adv.info}}</p>
    </div>
    <div class="cls01">
      <van-tag type="success">{{adv.label}}</van-tag>
    </div>
    <div class="cls01"><span >￥{{adv.price}}</span></div>
    <van-image
        width="22rem"
        height="22rem"
        :src="adv.imgurl"
    />
  </div>

  </div>

</div>
  <div>

  <van-divider />
    <van-row>
      <van-col span="8"><div class="cls01"><h2>探图点评({{value}})</h2></div></van-col>
      <van-col span="8"></van-col>
      <van-col span="8"><van-rate v-model="value" readonly allow-half /></van-col>
    </van-row>
  <div v-for="a in comments">
      <van-row>
        <van-col :span="3">
          <van-image
              round
              width="3rem"
              height="3rem"
              :src="a.headportrait"
          />
        </van-col>
        <van-col :span="5">
          <label style="font-size: 8px">{{ a.name}}</label><br>
          <van-tag round type="danger">{{ a.label }}</van-tag>
        </van-col>
        <van-col :span="15">
        </van-col>
      </van-row>
      <div>
          <p class="p1">{{a.evaluate}}</p>
      </div>

  </div>
  <div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" @click="chat()"/>
      <van-action-bar-icon icon="comment-circle" text="评论" color="#ff5000" @click="comment()"/>
      <van-action-bar-button  type="danger" text="立即购买" @click="pay()"/>
    </van-action-bar>


  </div>
  </div>
</template>

<script>
export default {
  name: "DetailView.vue",
  data(){
    return{
      comments:[
      ],
      adv:{
        info:"",
        label:"",
        price:"",
        imgurl:""
      },
      value:3.3
    }
  },
  mounted() {
    var aid=this.$route.query.id;
    this.axios.get("/api/detail/query.do?id="+aid).then(r=>{
      if(r.data.code==200){
        this.adv=r.data.data.data.advmsg
        this.comments=r.data.data.data.usermsg;
        this.value=r.data.data.data.advstarts;
        this.$store.commit("setApply",r.data.data.data.advmsg);
      }
    })
  },methods:{
    back(){
      history.back();
    },
    chat(name){
      this.$router.push({path:"/chat",query:{name:name}});
    },
    pay(){
      this.$router.push("/pay");
    },
    comment(){
      this.$router.push("/advcomment");
    }
  }
}
</script>

<style scoped>
#div01{
  width: 100%;
  height: 100px;
}
.cls01{
  text-align: left;
  margin-top: 20px;
  color: red;
}
.p1{
text-align: justify;
}


</style>